<template>
  <uni-popup ref="popup" type="right" style="z-index: 910">
    <view class="popup">
      <input class="uni-input" confirm-type="search" placeholder="搜索" v-model="search" />
      <view style="width:100%;height:73vh;overflow: auto;">
        <view class="direction-start" style="margin-top:20rpx;" v-for="(item,index) in fillList" :key="index">
          <view>{{item.name}}</view>
          <view class="center list" style="flex-wrap: wrap;">
            <view v-for="(items,indexs) in item.data" :key="indexs" @click="tabChange(item.type,items.value)"
              :class="fill_status===items.value?'active':pay_type===items.value?'active':''">
              {{items.name}}
            </view>
          </view>
        </view>
        <!-- :class="active===index?'active':''" -->
      </view>
      <view class="center lis" style="justify-content: space-around;">
        <view @click="submit(1)">重置</view>
        <view @click="submit(2)">确认</view>
      </view>
    </view>
  </uni-popup>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { getOrderFillingSearch, getOrderRechargeSearch } from '@/gql/earthPushing/order';
  import { toPublish } from '@mqtt';
  import { showLoading } from '@/utils/prompt';
  import { getDriverID } from '@/stores/driverID';
  const staff_id = getDriverID();
  const emit = defineEmits(['submit']);
  const popup = ref(null)
  const search = ref('')
  const fillList = ref()
  const fill_status = ref('')
  const pay_type = ref('')
  function initFill() {
    showLoading()
    const payload = {
      query: getOrderFillingSearch,
      variables: {
        staff_id
      },
    };
    toPublish(
      'ql/staff/getOrderFillingSearch',
      payload,
      (obj : any) => {
        const { getOrderFillingSearch } = obj.data;
        fillList.value = getOrderFillingSearch
        open()
      },
    );
  }
  function initCharge() {
    showLoading()
    const payload = {
      query: getOrderRechargeSearch,
      variables: {
        staff_id
      },
    };
    toPublish(
      'ql/staff/getOrderRechargeSearch',
      payload,
      (obj : any) => {
        const { getOrderRechargeSearch } = obj.data;
        fillList.value = getOrderRechargeSearch
        open()
      },
    );
  }
  function tabChange(type : string, name : string) {
    if (type === 'fill_status') {
      fill_status.value = name
    } else {
      pay_type.value = name
    }
  }
  function submit(num : number) {
    switch (num) {
      case 1:
        del()
        break;
      case 2:
        emit('submit', pay_type.value, search.value, fill_status.value,)
        close()
        break;
    }
  }
  function del() {
    fill_status.value = ''
    pay_type.value = ''
    search.value = ''
  }
  function open() {
    del()
    popup.value.open();
  }
  function close() {
    popup.value.close();
  }
  defineExpose({
    initFill,
    initCharge,
    open,
    close,
  });
</script>
<style scoped lang="less">
  .popup {
    width: 650rpx;
    height: 100vh;
    background-color: #fff;
    bottom: 0px;
    padding: 100rpx 20rpx 20rpx;
    box-sizing: border-box;

    input {
      width: 100%;
      height: 76rpx;
      background: #ECF1F5;
      border-radius: 5px;
      text-align: center;
      margin-bottom: 20rpx;
    }

    .list {
      view {
        width: 173rpx;
        height: 63rpx;
        border: 1px solid #999999;
        border-radius: 5px;
        justify-content: center;
        text-align: center;
        line-height: 63rpx;
        margin: 15rpx 15rpx 15rpx 0px;
      }

      .active {
        border: 1px solid #558AF1;
        color: #558AF1;
      }
    }

    .lis {
      view {
        width: 240rpx;
        height: 90rpx;
        text-align: center;
        line-height: 90rpx;
        border-radius: 5px;
        margin-top: 15rpx;
      }

      view:nth-of-type(1) {
        border: 1px solid #558AF1;
        color: #558AF1;
        box-sizing: border-box;
      }

      view:nth-of-type(2) {
        background: #558AF1;
        color: #fff;
      }
    }

  }
</style>